Web Performance API-er: Måling av timing for overlegne brukeropplevelser

I dagens digitale landskap er et raskt og responsivt nettsted ikke lenger en luksus; det er en nødvendighet. Brukere forventer sømløse opplevelser, og selv en liten forsinkelse kan føre til frustrasjon, forlatte handlekurver og til syvende og sist, tapt omsetning. Web Performance API-er gir utviklere verktøyene til å presist måle ulike aspekter av nettstedets ytelse, slik at de kan identifisere flaskehalser og optimalisere brukeropplevelsen (UX).

Forstå viktigheten av metrikker for brukeropplevelse

Før vi dykker ned i de tekniske detaljene i API-ene, er det avgjørende å forstå hvorfor UX-metrikker er så viktige. De tilbyr en kvantifiserbar måte å vurdere hvordan brukere oppfatter hastigheten og responsiviteten til nettstedet ditt. Dårlig UX kan ha en negativ innvirkning på:

• Fluktfrekvens: Treg lastetid fører ofte til at brukere forlater nettstedet ditt før de engasjerer seg med innholdet.
• Konverteringsrater: En frustrerende brukeropplevelse kan avskrekke potensielle kunder fra å fullføre transaksjoner.
• Rangering i søkemotorer: Søkemotorer som Google prioriterer nettsteder med god ytelse, noe som påvirker synligheten din i søkeresultatene. Core Web Vitals, som i stor grad er avhengige av ytelses-API-er, er en rangeringsfaktor.
• Merkevareoppfatning: Et tregt nettsted kan skape et negativt inntrykk av merkevaren din, og antyde mangel på oppmerksomhet på detaljer og en dårlig brukeropplevelse.

Sentrale Web Performance API-er og metrikker

Flere Web Performance API-er er tilgjengelige, og hver gir unik innsikt i ulike aspekter av nettstedets ytelse. Her er noen av de viktigste:

1. Navigation Timing API

Navigation Timing API gir detaljert tidsinformasjon knyttet til innlastingen av et dokument. Det lar deg måle tiden det tar for ulike stadier i lasteprosessen, for eksempel:

• navigationStart: Tidsstempelet rett før nettleseren begynner å hente dokumentet.
• fetchStart: Tidsstempelet rett før nettleseren begynner å hente dokumentet fra nettverket.
• domainLookupStart: Tidsstempelet rett før nettleseren starter DNS-oppslaget for dokumentets domene.
• domainLookupEnd: Tidsstempelet rett etter at nettleseren fullfører DNS-oppslaget.
• connectStart: Tidsstempelet rett før nettleseren begynner å etablere en tilkobling til serveren.
• connectEnd: Tidsstempelet rett etter at nettleseren er ferdig med å etablere en tilkobling til serveren.
• requestStart: Tidsstempelet rett før nettleseren sender HTTP-forespørselen for dokumentet.
• responseStart: Tidsstempelet rett etter at nettleseren mottar den første byten av HTTP-responsen.
• responseEnd: Tidsstempelet rett etter at nettleseren mottar hele HTTP-responsen.
• domLoading: Tidsstempelet rett før nettleseren setter document.readyState til "loading".
• domInteractive: Tidsstempelet rett etter at nettleseren har parset HTML-dokumentet og DOM er klar.
• domContentLoadedEventStart: Tidsstempelet rett før nettleseren utløser DOMContentLoaded-hendelsen.
• domContentLoadedEventEnd: Tidsstempelet rett etter at nettleseren utløser DOMContentLoaded-hendelsen.
• domComplete: Tidsstempelet rett etter at nettleseren setter document.readyState til "complete".
• loadEventStart: Tidsstempelet rett før nettleseren utløser load-hendelsen.
• loadEventEnd: Tidsstempelet rett etter at nettleseren utløser load-hendelsen.

Eksempel: Beregne tiden det tar for DNS-oppslag:

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. Resource Timing API

Resource Timing API gir detaljert tidsinformasjon for individuelle ressurser lastet av en nettside, slik som bilder, CSS-filer, JavaScript-filer og fonter. Dette API-et hjelper deg med å identifisere hvilke ressurser som tar lengst tid å laste og optimalisere leveringen av dem.

Nøkkelmetrikker:

• name: URL-en til ressursen.
• startTime: Tidsstempelet når nettleseren begynner å hente ressursen.
• responseEnd: Tidsstempelet når nettleseren mottar den siste byten av ressursen.
• duration: Total tid det tok å laste ressursen (responseEnd - startTime).
• transferSize: Størrelsen på ressursen som ble overført over nettverket.
• encodedBodySize: Størrelsen på ressursen før komprimering.
• decodedBodySize: Størrelsen på ressursen etter dekomprimering.

Eksempel: Identifisere det største bildet på siden:

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. User Timing API

User Timing API lar deg definere egne ytelsesmetrikker og måle tiden det tar for spesifikke kodeblokker eller brukerinteraksjoner. Dette er spesielt nyttig for å spore ytelsen til kritiske JavaScript-funksjoner eller komplekse UI-komponenter.

Nøkkelmetoder:

• performance.mark(markName): Oppretter et tidsstempel med det angitte navnet.
• performance.measure(measureName, startMark, endMark): Oppretter en ytelsesmåling mellom to markeringer.
• performance.getEntriesByType("measure"): Henter alle ytelsesmålinger.

Eksempel: Måle tiden det tar å rendre en kompleks React-komponent:

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. Long Tasks API

Long Tasks API hjelper deg med å identifisere oppgaver som blokkerer hovedtråden i mer enn 50 millisekunder. Disse lange oppgavene kan forårsake "UI jank" (hakking i brukergrensesnittet) og ha en negativ innvirkning på brukeropplevelsen. Ved å identifisere og optimalisere disse oppgavene kan du forbedre responsiviteten til nettstedet ditt.

Eksempel: Logge lange oppgaver til konsollen:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. Paint Timing API

Paint Timing API eksponerer to nøkkelmetrikker relatert til den visuelle renderingen av en nettside:

• First Paint (FP): Tiden da nettleseren rendrer den første pikselen på skjermen.
• First Contentful Paint (FCP): Tiden da nettleseren rendrer det første innholdselementet (f.eks. bilde, tekst) på skjermen.

Disse metrikkene er avgjørende for å forstå hvor raskt brukere oppfatter den første visuelle tilbakemeldingen fra nettstedet ditt.

Eksempel: Hente FCP:

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) er en Core Web Vital som måler tiden det tar for det største innholdselementet (f.eks. bilde, video, tekstblokk) å bli synlig innenfor visningsområdet. En god LCP-score indikerer at hovedinnholdet på siden lastes raskt, noe som gir en bedre brukeropplevelse.

Hva du bør optimalisere for LCP:

• Optimaliser bilder: Bruk passende bildeformater (f.eks. WebP), komprimer bilder og bruk responsive bilder.
• Optimaliser CSS: Minifiser og komprimer CSS-filer, og unngå render-blokkerende CSS.
• Optimaliser JavaScript: Utsett ikke-kritisk JavaScript, og unngå langvarige JavaScript-oppgaver.
• Serverens responstider: Sørg for at serveren din svarer raskt på forespørsler.

7. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) er en annen Core Web Vital som måler den visuelle stabiliteten til en nettside. Den kvantifiserer mengden uventede layout-endringer som skjer under lasteprosessen. En lav CLS-score indikerer at siden er visuelt stabil, noe som gir en mer behagelig brukeropplevelse.

Hva forårsaker layout-endringer:

• Bilder uten dimensjoner: Angi alltid bredde- og høydeattributter for bilder.
• Annonser, embeds og iframes uten reservert plass: Reserver plass for disse elementene for å forhindre at de forårsaker layout-endringer.
• Dynamisk injisert innhold: Vær forsiktig når du injiserer innhold dynamisk, da det kan forårsake uventede layout-endringer.
• Nettfonter som forårsaker FOIT/FOUT: Optimaliser innlasting av fonter for å minimere virkningen av Font-Of-Invisible-Text (FOIT) og Font-Of-Unstyled-Text (FOUT).

8. Interaction to Next Paint (INP)

Interaction to Next Paint (INP) er en Core Web Vital-metrikk som måler responsiviteten til en nettside på brukerinteraksjoner. Den evaluerer forsinkelsen for alle klikk, trykk og tastaturinteraksjoner en bruker gjør under sitt besøk på en side. INP erstatter First Input Delay (FID) som en Core Web Vital i mars 2024.

Forbedre INP:

• Optimaliser JavaScript-kjøring: Del opp lange oppgaver i mindre, asynkrone biter for å unngå å blokkere hovedtråden.
• Utsett ikke-kritisk JavaScript: Last kun den nødvendige JavaScript-koden for den første renderingen og utsett resten.
• Bruk Web Workers: Flytt beregningsintensive oppgaver til Web Workers for å forhindre at de blokkerer hovedtråden.
• Optimaliser hendelseshåndterere: Sørg for at hendelseshåndterere er effektive og unngår å utføre unødvendige operasjoner.

Praktiske eksempler og kodebiter

Her er noen praktiske eksempler på hvordan du kan bruke Web Performance API-er for å måle og optimalisere nettstedets ytelse:

Eksempel 1: Måle sidens lastetid

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

Eksempel 2: Identifisere ressurser som laster tregt

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

Eksempel 3: Måle Time to Interactive (TTI) - Approksimasjon

Merk: TTI er en kompleks metrikk, og dette er en forenklet tilnærming. Sann TTI krever en mer sofistikert metode.

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

Handlingsrettet innsikt for å optimalisere brukeropplevelsen

Når du har samlet inn ytelsesdata ved hjelp av Web Performance API-er, kan du bruke følgende handlingsrettede innsikt for å optimalisere brukeropplevelsen på nettstedet ditt:

• Optimaliser bilder: Komprimer bilder, bruk passende bildeformater (f.eks. WebP), og bruk responsive bilder for å redusere bildenes lastetid.
• Minifiser og komprimer kode: Minifiser og komprimer HTML-, CSS- og JavaScript-filer for å redusere størrelsen og forbedre lastetidene.
• Utnytt nettleser-caching: Konfigurer serveren din til å sette passende cache-headere for å aktivere nettleser-caching av statiske ressurser.
• Bruk et Content Delivery Network (CDN): Distribuer innholdet på nettstedet ditt over flere geografisk spredte servere for å redusere forsinkelse for brukere på forskjellige steder. Populære CDN-leverandører inkluderer Cloudflare, Akamai og Amazon CloudFront.
• Optimaliser innlasting av fonter: Bruk font-display: swap for å forhindre blokkering av fonter og forbedre den oppfattede lastehastigheten på nettstedet ditt.
• Reduser HTTP-forespørsler: Minimer antall HTTP-forespørsler ved å kombinere CSS- og JavaScript-filer, inline kritisk CSS og bruke CSS-sprites.
• Utsett ikke-kritiske ressurser: Utsett innlastingen av ikke-kritiske ressurser, som bilder og JavaScript-filer, til etter den første sideinnlastingen.
• Optimaliser serverens responstider: Sørg for at serveren din svarer raskt på forespørsler ved å optimalisere server-side-koden og databasespørringer.
• Overvåk ytelsen regelmessig: Overvåk kontinuerlig ytelsen til nettstedet ditt ved hjelp av Web Performance API-er og andre verktøy for ytelsesovervåking for å identifisere og løse eventuelle ytelsesproblemer. Verktøy som Google PageSpeed Insights, WebPageTest og Lighthouse kan gi verdifull innsikt.

Verktøy og biblioteker for ytelsesovervåking

Flere verktøy og biblioteker kan hjelpe deg med å overvåke og analysere nettstedets ytelse ved hjelp av Web Performance API-er:

• Google PageSpeed Insights: Et gratis verktøy som analyserer ytelsen til nettstedet ditt og gir anbefalinger til forbedringer.
• WebPageTest: Et gratis verktøy som lar deg teste ytelsen til nettstedet ditt fra forskjellige steder og nettlesere.
• Lighthouse: Et åpen kildekode, automatisert verktøy for å forbedre kvaliteten på nettsider. Det har revisjoner for ytelse, tilgjengelighet, progressive webapper, SEO og mer.
• New Relic: En omfattende plattform for ytelsesovervåking som gir sanntidsinnsikt i nettstedets ytelse.
• Datadog: En overvåkings- og analyseplattform som gir innsyn i hele infrastrukturen din, inkludert nettstedets ytelse.
• Sentry: En plattform for sanntids feilsporing og ytelsesovervåking.
• Web Vitals Chrome Extension: En Chrome-utvidelse som viser Core Web Vitals-metrikker i sanntid.

Hensyn for globale publikum

Når du optimaliserer nettstedets ytelse for et globalt publikum, er det viktig å ta hensyn til følgende faktorer:

• Geografisk plassering: Bruk et CDN for å distribuere innholdet ditt over flere geografisk spredte servere, noe som reduserer forsinkelse for brukere på forskjellige steder.
• Nettverksforhold: Optimaliser nettstedet ditt for brukere med trege eller upålitelige nettverksforbindelser ved å bruke teknikker som bildekomprimering, kodeminifisering og nettleser-caching.
• Enhetskapasiteter: Optimaliser nettstedet ditt for forskjellige enheter, inkludert mobiltelefoner, nettbrett og stasjonære datamaskiner, ved å bruke responsivt design og adaptive lasteteknikker.
• Språk og lokalisering: Sørg for at nettstedet ditt er lokalisert for forskjellige språk og regioner, inkludert oversettelse av innhold og justering av layouter for forskjellige tekstretninger.
• Tilgjengelighet: Sørg for at nettstedet ditt er tilgjengelig for brukere med nedsatt funksjonsevne ved å følge retningslinjer for tilgjengelighet som WCAG.

Konklusjon

Web Performance API-er gir uvurderlige verktøy for å måle og optimalisere nettstedets ytelse. Ved å forstå og bruke disse API-ene kan utviklere identifisere ytelsesflaskehalser, forbedre brukeropplevelsen og til syvende og sist drive forretningssuksess. Husk å prioritere Core Web Vitals (LCP, CLS og INP) som nøkkelmetrikker for den generelle helsen til nettstedet og brukertilfredsheten. Ved å kontinuerlig overvåke og optimalisere ytelsen til nettstedet ditt, kan du sikre en rask, responsiv og engasjerende opplevelse for brukere over hele verden.